<template>
    <div>
        <hr>
        当前求和为：<span>{{ sum }}</span><br><br>
        当前求和放大10倍为：<span>{{ bigSum }}</span><br><br>
        我在{{ school }}学习{{ name }}<br><br>

        <select v-model.number = 'n'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increament(n)">+</button>
        <button @click="decreament(n)">-</button>
        <button @click="oddIncreament(n)">当前求和为奇数再加</button>
        <button @click="increamentWait(n)">等一等再加</button>
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    name: 'Count',
    data(){
        return {
            n:1
        }
    },
    methods:{
        increament(){
            this.$store.commit('JIA', this.n)//不含条件或者逻辑，直接提交mutation
        },
        decreament(){
            this.$store.commit('JIAN',this.n)//不含条件或者逻辑，直接提交mutation
        },
        //奇数加
        oddIncreament(){
            this.$store.dispatch('jiaOdd', this.n)
        },
        //等一等再加
        increamentWait(){
            this.$store.dispatch('jiaWait',this.n)
        }
    },
    computed:{
        ...mapState(['sum','school','name']),
        ...mapGetters(['bigSum'])
    }
};
</script>

<style>
    button{
        margin-left:10px;
    }
</style>